<template>
  <div>
    <el-form
      :label-width="80"
      :model="form"
      class="myform"
      status-icon
      :rules="rules"
      ref="myform"
    >
      <el-form-item label="用户名称" prop="username">
        <el-input
          type="text"
          placeholder="请输入"
          v-model="form.username"
          :prefix-icon="User"
        ></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input
          type="password"
          placeholder="请输入"
          v-model="form.password"
          show-password
          :prefix-icon="Lock"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <p class="flex">
          <el-button type="primary" class="btn" @click="submitForm('myform')"
            >登录</el-button
          >
          <el-button type="danger" class="btn" @click="resetForm('myform')"
            >重置</el-button
          >
        </p>
      </el-form-item>
      <el-form-item class="lastitem">
        <div class="links">
          <router-link class="litem" :to="{ name: 'register' }">
            没有账号,立即注册
          </router-link>
          <router-link class="litem color" :to="{ name: 'forgetpass' }">
            忘记密码
          </router-link>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { toRefs, reactive, ref } from "vue";
import { User, Lock } from "@element-plus/icons";
import { reg } from "../utils/validata";
import { ElMessage } from "element-plus";
export default {
  setup(props, context) {
    const myform = ref();
    const state = reactive({
      form: {},
      User,
      Lock,
      reg,
      rules: {
        username: {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            pattern: reg.pwd,
            message: "请输入6-16位的字母组合",
            trigger: "blur",
          },
        ],
      },
    });
    const submitForm = () => {
      myform.value.validate((valid) => {
        if (valid) {
          //如果正则判断成功则发送请求

        } else {
          ElMessage({
            showClose: true,
            message: "登录信息有误，请重新输入",
            type: "error",
          });
        }
      });
    };
    const resetForm = () => {
      myform.value.resetFields();
    };
    return {
      ...toRefs(state),
      ref,
      myform,
      submitForm,
      resetForm,
    };
  },
};
</script>
<style lang="scss" scoped>
.lastitem{
    ::v-deep .el-form-item_content{
        line-height: 1;
    }
}
</style>